<style type="text/css">
    form{background-color: white;}
    .form-group{border-bottom: 1px solid #eeeeee; height: .788rem;line-height: .788rem; margin: 0 0 0 .3rem ;}
    .form-group:first-of-type{ height: 2.35rem; line-height: 2.35rem; }
    .form-group>.imgs{ display: inline-block; height: 2.35rem; width: 2.4rem; vertical-align: middle; vertical-align: -webkit-baseline-middle; }
    label{ width: 1.5rem; display: inline-block; font-size: .28rem; text-indent: .25rem; float: left;}
    .form-group>input{ height: .70rem; line-height: .70rem; width: 65%; text-indent: .12rem; }
    button{ width: 100%; border: none; background-color: #0e52b3; color: #ffffff; font-size: .30rem; height: 1rem; line-height: 1rem; text-align: center; position: fixed; left: 0; bottom: 0; }
    .bottom{ margin-bottom: 1rem; }
    ::-webkit-input-placeholder{ color: red; }
    :-ms-input-placeholder{ color: red; }
    .radio{font-size: .24rem; }
    .radio >input{ vertical-align: middle; margin-left: .3rem; text-indent: -.3rem; }
    .radio p{width: 1.3rem;height: 100%;}
    .radio p .radio-icon{border-radius: 50%;position: relative;border:1px solid #e6e6e6;width: .4rem;height: .4rem;margin-top:.194rem;}
    .radio p span:nth-child(2){width: .9rem;text-align: center;}
    .radio p.active .radio-icon::after{content:"";border-radius: 50%;position: absolute;left: 0;top: 0;width: 70%;height: 70%;background:linear-gradient(to bottom,#82d1fc,#2287cf) ;background:-webkit-linear-gradient(top,#82d1fc,#2287cf) ;right: 0;bottom: 0;margin: auto;}
</style>
<div id="membership">
    <div id="form">
        <form action="">
            <div class="form-group">
                <label for="img">头像</label>
                <div class="imgs">
                    <img src="images/img/wangxi1_03.png" alt="" />
                </div>
            </div>
            <div class="form-group">
                <label for="loginName">账号</label>
                <input type="phone" id="loginName" readonly="readonly">
            </div>
            <div class="form-group">
                <label for="nickMoney">豆豆</label>
                <input type="text" id="nickMoney" readonly="readonly">
            </div>
            <div class="form-group">
                <label for="level">等级</label>
                <input type="text" id="level" readonly="readonly" >
            </div>
            <div class="form-group">
                <label for="useName">真实姓名*</label>
                <input type="text" id="useName" placeholder="必填" required="required">
            </div>
            <div class="form-group">
                <label for="nickName">昵称</label>
                <input type="text" id="nickName" readonly="readonly">
            </div>
            <div class="form-group">
                <label for="sex">性别</label>
                <div class="radio f_left">
                <p data-code="N" class="f_left  active">
                	<span class="radio-icon f_left"></span><span class="f_left">不公开</span>
                </p>
                <p data-code="M" class="f_left">
                	<span class="radio-icon f_left"></span><span class="f_left">男</span>
                </p>
                <p data-code="F" class="f_left">
                	<span class="radio-icon f_left"></span><span class="f_left">女</span>
                </p>
                   
                </div>
            </div>
            <div class="form-group">
                <label for="email">邮箱</label>
                <input type="email" id="email">
            </div>
            <div class="form-group">
                <label for="idCard">身份证号*</label>
                <input type="text" id="idCard" placeholder="必填" required="required">
            </div>
            <div class="form-group">
                <label for="phoneNo">电话号码*</label>
                <input type="text" id="phoneNo" placeholder="必填" maxlength="11" required="required">
            </div>
            <div class="form-group">
                <label for="qq">QQ</label>
                <input type="text" id="qq">
            </div>
            <div class="form-group">
                <label for="waChat">微信</label>
                <input type="text" id="waChat">
            </div>
            <div class="form-group bottom">
                <label for="aliPay">支付宝</label>
                <input type="text" id="aliPay">
            </div>
            <button type="submit">提交</button>

        </form>

    </div>
</div>